<style>
.page{
	background: #fff;
	width: 100%;
	height: 100%;
}
.wrap{
	width: 90%;
	height: 100%;
	margin: 0 auto;
	overflow: hidden;
}
.wrap-row{
	margin-bottom: 49rpx;
	min-height: 116rpx;
	overflow: hidden;
}
.loan_left{
	width: 45%;
	float: left;
}
.loan_right{
	width: 45%;
	float: right;
}
.loan_title{
	font-size: 34rpx;
}
.loan_input_text{
	font-size: 28rpx;
	color: #717171;
	border-bottom: 1rpx solid #bfbfbf;
	margin-top: 15rpx;
}
.loan_border{
	border: 1rpx solid #bfbfbf;
	margin-top: 12rpx;
	min-height: 53rpx;
	line-height: 53rpx;
	border-radius: 3rpx;
	overflow: hidden;
}
.money_symbol{
	font-size: 28rpx;
	float: left;
	line-height: 53rpx;
	width: 15%;
	text-align: center;
}
.loan_border .loan_input_text{
	border-bottom: none;
	margin-top: 0rpx;
	width: 85%;
	float: right;
}
.loan_select .loan_input_text{
	float: left;
	margin-left: 15rpx;
}
.loan_price{
	display: flex;
	align-items: center;
}
.select_icon{
	width: 31rpx;
	height: 17rpx;
	float: right;
	position: relative;
	top: 18rpx;
	right: 13rpx;
}
.loan_icon{
	width: 35rpx;
	height: 35rpx;
	position: relative;
	top: 6rpx;
	margin-right: 18rpx;
}
.loan_type .loan_border{
	width: 100%;
	border: 0;
	margin-top: 25rpx;
}
.loan_day_text{
	height: 56rpx;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.loan_stuff{
	width: 128rpx;
	height: 62rpx;
	text-align: center;
	line-height: 62rpx;
	border-radius: 8rpx;
	font-size: 32rpx;
	border: 1rpx solid #888;
	margin-right: 16rpx;
	float: left;
}
.choose_image{
	height: 133rpx;
	width: 133rpx;
	float: left;
	margin-right: 25rpx;
	margin-top: 10rpx;
}
.image-file{
	width: 133rpx;
	height: 133rpx;
	margin-right: 25rpx;
	margin-bottom: 10upx;
	margin-top: 10rpx;
	position: relative;
	float: left;
}
.image-file image{
	width: 100%;
	height: 100%;
}
.close_diy{
	height: 35upx!important;
	width: 35upx!important;
	position: absolute;
	right: -5upx;
	top: -10upx;
	z-index: 9;
}
.image-list{
	/* overflow: hidden; */
}
.image-list image{
	margin-right: -15rpx;
	margin-bottom: -15rpx;
}
.textarea{
	border: 1rpx solid #7f7f7f;
	width: 634rpx;
	height: 215rpx;
	border-radius: 10rpx;
	padding: 5px;
	overflow: hidden;
	color: #6d6d6d;
	font-size: 30rpx;
}
.circle_choice{
	width: 46rpx;
	height: 46rpx;
	border-radius: 30rpx;
	border: 1rpx solid #999;
	float: left;
	margin-right: 12rpx;
}
.selected{
	background: #f7a3a3;
	color: #fff;
	border: 1rpx solid #f7a3a3;
}
.choice_text{
	font-size: 30rpx;
	position: relative;
	top: 5rpx;
}
.submit{
	width: 292rpx;
	height: 88rpx;
	margin: 0 auto;
	text-align: center;
	color: #fff;
	line-height: 88rpx;
	font-size: 34rpx;
	border-radius: 10rpx;
	background: #f46666;
	margin-bottom: 20rpx;
}
.agree_call{
	margin-bottom: 0rpx;
}
.rule-icon{
	position: fixed;
	bottom: 20%;
	right: 0;
	width: 154rpx;
	height: 154rpx;
	display: block;
	z-index: 999;
}
/* 规则弹框 */
.rule-mark{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background: rgba(0,0,0,.5);
	height: 100%;
	z-index: 19;
}
.g-popup-rule {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #fff;
	border-radius: 5px;
	width: 70%;
	padding: 20px;
	z-index: 100;
	font-size: 28rpx;
}

.g-popup-rule>view {
	padding-left: 10px;
	margin-bottom: 10px;
}

.g-popup-rule:after {
	content: '';
	display: block;
	width: 3px;
	height: 15px;
	background: #d71311;
	position: absolute;
	top: 21px;
	left: 10px;
}
.g-popup-rule .content{
	max-height: 500rpx;
}
.g-popup-rule .g-popup-close {
	padding: 5px;
	border-radius: 100px;
	border: 3px solid #fff;
	position: absolute;
	bottom: -60px;
	left: 50%;
	transform: translateX(-50%);
}
.navigation{
    position: relative;
    top: -14px;
}
.navigation .nav_view{
    height: 50rpx;
    line-height: 50rpx;
}
.address{
    margin-bottom: 18rpx;
}
.goRight{
    position: relative;
    top: 13rpx;
    left: 16rpx;
    width: 46rpx;
    height: 46rpx;
    margin-top: 2rpx;
}
.loan_banner{
	width: 750rpx;
	height: 326rpx;
	display: block;
	margin-bottom: 20rpx;
}
</style>
<template>
	
	<view class="page">
		<image src="../../static/images/transfer/loan_banner.jpg" class="loan_banner"></image>
		<view class="wrap">
			<view class="wrap-row">
				<view class="loan_left">
					<view class="loan_title">
						姓名
					</view>
					<input type="text" class="loan_input_text" placeholder="请输入姓名" :value="realname" data-type="realname" @input="realname_func"/>
				</view>
				<view class="loan_right">
					<view class="loan_title">
						联系电话
					</view>
					<input type="text" class="loan_input_text" placeholder="请输入联系电话" :value="mobile" data-type="mobile" @input="mobile_func"/>
				</view>
			</view>
			<view class="wrap-row loan_type">
				<view class="">
					<view class="loan_title">
						<image src="../../static/icons/loan/loan_type.png" mode="" class="loan_icon"></image>抵押物
					</view>
					<view class="loan_border">
						<view class="loan_stuff" :data-index="(index+1)" @tap="choose_loan_type" :class="loan_type == (index+1) ? 'selected':''" v-for="(item, index) in loan_data" :key="index">{{item}}</view>
					</view>
				</view>
			</view>
			<view class="wrap-row">
				<view class="loan_left">
					<view class="loan_title">
						<image src="../../static/icons/loan/loan_money.png" mode="" class="loan_icon"></image>质押金额
					</view>
					<view class="loan_border loan_price">
						<view class="money_symbol">￥</view>
						<input type="digit" class="loan_input_text " placeholder="请输入金额" data-type="loan_money" @input="money_func"/>
					</view>
				</view>
				<view class="loan_right">
					<view class="loan_title">
						<image src="../../static/icons/loan/loan_day.png" mode="" class="loan_icon"></image>质押天数
					</view>
					<view class="loan_border loan_select" @tap="select_day">
						<view class="loan_input_text loan_day_text">{{loan_day_text}}</view>
						<image src="../../static/icons/loan/select.png" mode="" class="select_icon" :value='loan_day' data-type="loan_day"></image>
					</view>
				</view>
			</view>
			
			<view class="wrap-row loan_type">
				<view class="">
					<view class="loan_title">
						<image src="../../static/icons/loan/choose_image_icon.png" mode="" class="loan_icon"></image>图片
					</view>
					<view class="loan_border">
						<image src="../../static/icons/loan/loan_image.png" class="choose_image" mode="" @tap="chooseImage"></image>
						<view class="image-list">
							<block v-for="(image,index) in imageList" :key="index">
								<view class="image-file">
									<image src="../../static/icons/jewel/close_diy.png" @tap="delete_img(image.url, index)" class="close_diy" mode=""></image>
									<image class="image" :src="image.temp" :data-src="image.temp" :data-index="index" @tap="previewImage"></image>
								</view>
							</block>
							<block v-for="(image,index) in loan_images" :key="index">
								<view class="image-file">
									<image src="../../static/icons/jewel/close_diy.png" @tap="delete_loan_img(index)" class="close_diy" mode=""></image>
									<image class="image" :src="image" :data-src="image" :data-index="index" @tap="previewImage"></image>
								</view>
							</block>
							<!-- <view class="image-file">
								<image src="../../static/icons/jewel/close_diy.png" @tap="delete_img(image.url, index)" class="close_diy" mode=""></image>
								<image class="image" :src="image.temp" :data-src="image.temp" @tap="previewImage"></image>
								<image src="../../static/icons/loan/choose_image.png" class="choose_image" mode="" @tap="previewImage"></image>
							</view> -->
						</view>
					</view>
				</view>
			</view>
			<view class="wrap-row">
				<textarea placeholder="备注" class="textarea" data-type="remarks" @input="remarks_func"/>
			</view>
			<!-- <view class="wrap-row agree_call" @tap="agree_call_func">
				<view class="circle_choice" :class="agree_call == 1 ? 'selected':''"></view>
				<view class="choice_text">允许电话联系我</view>
			</view> -->
			<view class="navigation">
				<view class="phone_number nav_view" @tap="CallPhone">
					公司电话：{{location.phone_number}}<image class="goRight" src="../../static/icons/jewel/goRight.png" mode=""></image>
				</view>
				<view class="address nav_view" @tap="getLocation">
					公司地址：{{location.address}}<image class="goRight" src="../../static/icons/jewel/goRight.png" mode=""></image>
				</view>
			</view>
			<view class="submit" @tap="insert">
				提交
			</view>
			
			<!-- 规则弹框 -->
			<image src="../../static/icons/transfer/rule-icon.png" class="rule-icon" @tap="showRule"></image>
			<view class="rule-mark" v-if="ruleShow" @touchmove.stop=""  @tap="showRule"></view>
			<view class="g-popup-rule" v-if="ruleShow" @touchmove.stop="">
			    <view>{{ruleData.title}}</view>
			    <scroll-view class="content" scroll-y>
			    	<!-- <uParse :content="ruleData.content" @preview="preview" /> -->
					<view v-html="ruleData.content"></view>
			    </scroll-view>
			    <view class="g-popup-close" @tap="showRule">
			        <close size="40" color="#fff"></close>
			    </view>
			</view>
			<view class="m-loading" v-if="bIsShowLoading">
				<view class="m-loading">
					<image src="../../static/images/loading.gif" mode="widthFix"></image>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import henglang from '@/common/common.js';
	import uParse from '@/components/uParse/src/wxParse.vue';
	export default {
		data() {
			return {
				day_data: ['30天', '20天', '15天', '7天', '3天', '1天'],
				loan_data: ['珠宝', '手表', '汽车', '其他'],
				loan_type: 0,
				loan_day_text: '请选择天数',
				agree_call: 0,
				imageList: [],
				countPhoto: 9,
				realname: uni.getStorageSync('userInfo').realname,	// 真实名称
				mobile: uni.getStorageSync('userInfo').mobile,	// 手机号码
				loan_money: 0,
				loan_day: 0,
				remarks: '',
				loan_images: [],	// 有http路径的
				loan_image_path: [],	// 服务器存放路径
				load_data: [],
				transfer_id: 0,
				days_data_network: [],
				ruleShow: false,
				ruleData:[],
				location: [],	// 公司地址
				bIsShowLoading: false
			}
		},
		components: {
			uParse
		},
		onLoad(options) {
			let that = this;
			if(options.id) {
				that.transfer_id = options.id;
				henglang.get('Loan/getOne',{id: that.transfer_id}, true, function(res){
					if(res.data.code == 0){
						that.load_data = res.data.data;
						that.loan_images = res.data.data.photos_text;
						that.loan_image_path = res.data.data.photos;
					}
				})
			}
			that.bIsShowLoading = true;
			henglang.get('pawn/pledgeRule',{}, false, function(res){
				if(res.data.code == 0){
					that.ruleData = res.data.data;
				}
			})
			henglang.get('Loan/getLocation',{}, false, function(res){
				that.bIsShowLoading = false;
				that.location = res.data;
			})
		},
		onNavigationBarButtonTap(e) {
			if (e.index == 0) { 
				uni.navigateTo({
					url:'/pages/Loan/Loan_list'
				})
			}
		},
		methods:{
			getLocation(){
				let that = this;
				uni.openLocation({
					latitude: that.location.latitude,
					longitude: that.location.longitude,
					name: that.location.name,
					address: that.location.location_text,
					success: function () {}
				});
			},
			CallPhone(){
				let that = this;
				uni.makePhoneCall({
					phoneNumber: that.location.phone_number
				});
			},
			delete_loan_img(index){
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定要删除该图片吗？',
					success: function (res) {
						if (res.confirm) {
							that.loan_images.splice(index, 1);
							that.loan_image_path.splice(index, 1);
						}
					}
				});
				
			},
			money_func(e){
				this.loan_money = e.target.value;
			},
			remarks_func(e){
				this.remarks = e.target.value;
			},
			mobile_func(e){
				this.remarks = e.target.value;
			},
			realname_func(e){
				this.realname = e.target.value;
			},
			insert(){
				let that = this;
				if(that.realname == '') return henglang.showToast('请填写真实名称', 1000);
				if(that.mobile == '') return henglang.showToast('请填写联系电话', 1000);
				if(that.loan_type == 0) return henglang.showToast('质押类型必须选择哦', 1000);
				if(that.loan_money == 0) return henglang.showToast('质押金额必须大于0', 1000);
				if(that.loan_day == 0) return henglang.showToast('质押天数必须选择哦', 1000);
				if(that.imageList.length == 0 && that.loan_image_path.length == 0) return henglang.showToast('请至少上传一张图片', 1000);
				let data = {
					realname: that.realname,
					mobile: that.mobile,
					loan_money: that.loan_money,
					loan_day: that.loan_day,
					loan_type: that.loan_type,
					images: that.getImageList('url'),
					remarks: that.remarks,
					// agree_call: that.agree_call,
				};
				if(that.transfer_id) {
					if(that.loan_image_path.length>0) data.loan_image_path = that.loan_image_path;
					data.transfer_id = that.transfer_id;
				}
				that.bIsShowLoading = true
				henglang.post('loan/apply_loan', data, true, function (res){
					let resdata = res.data;
					henglang.showToast(resdata.msg, 1000);
					if(resdata.code == 0){
						setTimeout(() => {
							uni.navigateTo({
								url:'/pages/Loan/Loan_list'
							})
						}, 1500)
					}
					that.bIsShowLoading = false
				})
			},
			select_day(){
				let that = this;
				if(that.days_data_network == '') {
					henglang.showToast('请先选择抵押物类型', 1000);
				}else{
					uni.showActionSheet({
					    itemList: that.days_data_network,
					    success: function (res) {
					        let tapIndex = res.tapIndex + 1;
							that.loan_day_text = that.days_data_network[res.tapIndex];
							that.loan_day = that.loan_day_text.replace(/[^0-9]/ig,"");
					    },
						fail: function (){
							that.loan_day_text = '请选择天数';
						}
					});
				}
			},
			choose_loan_type(e){
				let that = this;
				let loan_type = e.currentTarget.dataset.index;
				if(loan_type != this.loan_type) {
					that.loan_day_text = '请选择天数';
					that.loan_day = 0;
					that.bIsShowLoading = true;
					this.loan_type = loan_type;
					henglang.get('loan/loan_days', {loan_type: this.loan_type}, false, function(res){
						that.days_data_network = res.data;
						that.bIsShowLoading = false;
					})
				}
				
			},
			agree_call_func(){
				this.agree_call = this.agree_call ? 0 : 1;
			},
			delete_img: function (filePath, index){
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定要删除该图片吗？',
					success: function (res) {
						if (res.confirm) {
							henglang.get('loan/delteImage', {filePath: filePath}, false, function(res){
								that.imageList.splice(index,1);
							})
						}
					}
				});
			},
			// 获取具体的图片列表
			getImageList: function (key){
				let imageList = this.imageList;
				let urls = [];
				for (let i in imageList) {
					urls = urls.concat(imageList[i][key]);
				}
				return urls;
			},
			previewImage: function(e) {
				let that = this;
				var current = e.target.dataset.src;
				var index = e.target.dataset.index;
				let urls = this.getImageList('temp');
				uni.previewImage({
					current: that.transfer_id?that.load_data['photos_text'][index]:current,
					urls: that.transfer_id?that.load_data['photos_text']:urls
				})
			},
			chooseImage: function() {
				let that = this;
				let length = this.imageList.length + this.loan_image_path.length;
				if (length === that.countPhoto) return henglang.showToast('目前只允许上传' + that.countPhoto + '张图片', 1000);
				uni.chooseImage({
					sourceType: ['album', 'camera'],
					sizeType: ['original', 'compressed'],
					count: that.countPhoto,
					success: (res) => {
						let filePath = res.tempFilePaths[0];
						uni.uploadFile({
							url: henglang.host + 'Upload/uploadCustom',
							fileType: 'image',
							filePath: filePath,
							name: 'photo',
							header: {'app-key': henglang.app_key},
							formData: {folder: 'loan'},
							success: (uploadFileRes) => {
								let data = uploadFileRes.data;
								data = JSON.parse(data);
								if(data.code == 0) {
									that.imageList = that.imageList.concat({
										'temp': filePath,
										'url': data.data.url
									});
								}else{
									henglang.showToast(data.msg, 1500);
								}
							}
						});
					}
				})
			},
			showRule() {
				this.ruleShow = !this.ruleShow;
			}
		}
	}
</script>